<!DOCTYPE html>
<html>
<head>
	<title>Vue实例</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<div id='root' v-on:click="alertTips">
		{{message}}

		<test-html></test-html>
		<!-- 当你的组件名是大驼峰,那么用的时候就要使用小写并用杠连接才生效 -->
		<!-- <TestHtml></TestHtml> -->
	</div>
	<script type="text/javascript">
		/**
		 * 创建一个组件,其实它也是一个 vue 实例:
		 *  一个 vue 项目是由很多个 vue 实例(也即很多个组件)组成的
		 */
		Vue.component('TestHtml',{
			template:'<div>hello TestHtml</div>'
		})

		/**
		 * 创建了一个根实例,接管了 id 为 root这个dom里面的所有(属性、事件...)
		 */
		var vm = new Vue({
			el : '#root',
			data : {
				message : 'hello Vue'
			},
			methods : {
				alertTips : function(){
					alert('123')
				}
			}
		});

		//将组件注册在这里会报错,不知道为什么,要放到vm 实例上面才不会报错
		// Vue.component('TestHtml',{
		// 	template:'<div>hello TestHtml</div>'
		// })

	</script>
</body>
</html>
